<template>
  <div class="singer">
    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first" class="tab-pane">
            <div class="mvImg" v-for="(item, index) in imgAllList" :key="index" @click="toMv(item)">
              <el-image :src="item.cover" class="img" ></el-image>
              <h3 class="article">{{ item.artistName }}</h3>
            </div>
        </el-tab-pane>
        <el-tab-pane label="内地" name="second"  class="tab-pane">
          <div class="mvImg" v-for="(item, index) in imgInList" :key="index" @click="toMv(item)">
            <el-image :src="item.cover" class="img"></el-image>
            <h3 class="article">{{ item.artistName }}</h3>
          </div>
        </el-tab-pane>
        <el-tab-pane label="日本" name="third" class="tab-pane">
          <div class="mvImg" v-for="(item, index) in imgJaList" :key="index" @click="toMv(item)">
            <el-image :src="item.cover" class="img"></el-image>
            <h3 class="article">{{ item.artistName }}</h3>
          </div>
        </el-tab-pane>
        <el-tab-pane label="韩国" name="fourth" class="tab-pane">
          <div class="mvImg" v-for="(item, index) in imgPaList" :key="index" @click="toMv(item)">
            <el-image :src="item.cover" class="img"></el-image>
            <h3 class="article">{{ item.artistName }}</h3>
          </div>
        </el-tab-pane>
        <el-tab-pane label="欧美" name="five" class="tab-pane">
          <div class="mvImg" v-for="(item, index) in imgAcList" :key="index" @click="toMv(item)">
            <el-image :src="item.cover" class="img"></el-image>
            <h3 class="article">{{ item.artistName }}</h3>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <div class='mask' v-if='videoState == true' @click='masksCloseFun'></div>
      <div class="videomasks" v-if="videoState == true">
        <video :src="videoSrc"  controls='controls' autoplay>您的浏览器不支持 video 标签。</video>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import myVideo from 'vue-video'
export default {
  components: {
    myVideo
  },
  data () {
    return {
      activeName: 'first',
      imgAllList: [],
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      imgInList: [],
      imgJaList: [],
      imgPaList: [],
      imgAcList: [],
      dialogVisible: false,
      videoSrc: '',
      videoState: false
    }
  },
  methods: {
    async getMvList () {
      const { data: res } = await axios.get('http://localhost:3000/mv/all')
      console.log(res)
      this.imgAllList = res.data
    },
    async getCaList () {
      const { data: res } = await axios({
        method: 'get',
        url: 'http://localhost:3000/mv/all?area=内地'
      })
      // console.log(res)
      this.imgInList = res.data
    },
    async getJaList () {
      const { data: res } = await axios({
        method: 'get',
        url: 'http://localhost:3000/mv/all?area=日本'
      })
      // console.log(res)
      this.imgJaList = res.data
    },
    async getPaList () {
      const { data: res } = await axios({
        method: 'get',
        url: 'http://localhost:3000/mv/all?area=韩国'
      })
      // console.log(res)
      this.imgPaList = res.data
    },
    async getAcList () {
      const { data: res } = await axios({
        method: 'get',
        url: 'http://localhost:3000/mv/all?area=欧美'
      })
      // console.log(res)
      this.imgAcList = res.data
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    async toMv (item) {
      this.videoState = true
      const { data: res } = await axios({
        method: 'get',
        url: 'http://localhost:3000/mv/url?id=' + item.id
      })
      console.log(res)
      this.videoSrc = res.data.url
    },
    dialogBeforeClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    checkVideoFun () {
      this.videoState = true
    },
    masksCloseFun () {
      this.videoState = false
    }
  },
  mounted () {
    this.getMvList()
    this.getCaList()
    this.getJaList()
    this.getPaList()
    this.getAcList()
  }
}
</script>

<style lang="scss">
@import '../assets/css/singer.scss';
.singer {
  margin: 100px 0;
}
.tabs {
  margin-left: 60px;
  // position: fixed;
  min-width: 1600px;
}
.mvImg {
  flex-direction: column;
  width: 22%;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  .img {
    width: 350px;
    height: 200px;
    padding: 15px;
  }
}
.article{
  // float: left;
  // left: 50%;
  text-align: center;
  // margin-left: -105px;
}
.mask{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:10;
background-color: #000000;
opacity: .6;
}
.videomasks{
    max-width: 1200px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 20;
    transform: translate(-50%,-50%);
  }
  .videomasks video{
    width: 100%;
    height: 100%;
  }
  .tab-pane{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
</style>
